{extend name="layouts/app"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">角色管理</div>
    <div class="layui-card-body">
        <div class="layui-form">
            <table class="layui-hide" id="table" lay-filter="table"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <a class="layui-btn layui-btn-sm" href="{:url('create')}">添加角色</a>
                </div>
            </script>
            <script type="text/html" id="barTool">
                {{#  if(d.id == 1){ }}
                <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">不可操作</a>
                {{#  } else { }}
                <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs">编辑</a>
                <a href='{:url("delete")}?id={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
                {{#  } }}
            </script>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use('table', function() {
        var table = layui.table,
            $ = layui.$;
        table.render({
            elem: '#table',
            toolbar: '#toolbarDemo',
            url: '{:url("index")}',
            cols: [
                [
                    { field: 'id', align: 'center', width: 60, title: 'ID' },
                    { field: 'title', width: 200, title: '角色名称'},
                    { field: 'description', title: '角色描述' },
                    { field: 'status', width: 100,title: '状态', templet: '<div>{{#  if(d.status){ }} <button class="layui-btn layui-btn layui-btn-xs">正常</button> {{#  } else { }} <button class="layui-btn layui-btn-danger layui-btn layui-btn-xs">禁用</button> {{#  } }} </div>' },
                    { fixed: 'right', width: 160, title: '操作', toolbar: '#barTool' }
                ]
            ],
        });
    });
</script>
{/block}